<!-- 角色管理 -->
<template>
  <div>
    <a-table
      :columns="columns"
      :data-source="tableData"
      :pagination="pagination"
      :row-class-name="(record, index) => (index % 2 === 1 ? 'table-striped' : null)"
      :row-key="
        (record) => {
          return String(record.id)
        }
      "
      :scroll="{ x: 1000 }"
      size="small"
    >
      <template #bodyCell="{ text, column }">
        <template v-if="column.key === 'enrollmentTime'">
          <a>
            {{ text && text.substr(0, 7) }}
          </a>
        </template>
        <template v-else-if="column.dataIndex === 'action'">
          <a-space>
            <a-button class="success-btn" size="small">查看</a-button>
            <a-button v-permission="'editBtn'" class="warning-btn" size="small">编辑</a-button>
          </a-space>
        </template>
      </template>
    </a-table>
  </div>
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue'
import { getAccountList } from '@/api/account'

const columns = [
  {
    title: '姓名',
    dataIndex: 'realName',
    fixed: 'left'
  },
  {
    title: '手机号',
    dataIndex: 'mobile'
  },
  {
    title: '身份证号',
    dataIndex: 'idCardValue',
    width: 120
  },
  {
    title: '学校',
    dataIndex: 'schoolName'
  },
  {
    title: '注册时间',
    dataIndex: 'createTime'
  },
  {
    title: '入学时间',
    dataIndex: 'enrollmentTime'
  },
  {
    title: '专业',
    dataIndex: 'major'
  },
  {
    title: '操作',
    dataIndex: 'action'
  }
]
const tableData = ref([])
const pagination = reactive({
  total: 0,
  size: 'small',
  current: 1,
  pageSize: 15, //每页中显示10条数据
  showSizeChanger: true,
  pageSizeOptions: ['15', '20', '30'], //每页中显示的数据
  showTotal: (total) => `共有 ${total} 条数据`, //分页中显示总的数据
  onShowSizeChange: (current, pageSize) => {
    pagination.pageSize = pageSize
    selectList()
  }, // 改变每页数量时更新显示
  onChange: (page) => {
    pagination.current = page
    getSchoolListFn()
  }
})
const selectList = () => {
  pagination.current = 1
  getSchoolListFn()
}
const getSchoolListFn = () => {
  let _params = {
    pageNum: pagination.current,
    pageSize: pagination.pageSize
  }
  getAccountList(_params)
    .then((res) => {
      tableData.value = res.data.records
      pagination.total = res.data.total
    })
    .catch((error) => {
      console.log(error)
    })
}
onMounted(() => {
  selectList()
})
</script>
<styl scope></styl>
